<template>
<div>
  <img src="./assets/5085/lihui.png" class="lihui" />
  <div class="main">
    <el-row>
      <el-col :span="24" class="title">5085舰长三国志角色卡生成器</el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><span class="linkBtn" @click="resetCookie">重置天选之子</span></el-col>
      <el-col :span="20" style="text-align:right;" ><span class="linkBtn" v-popover:readmePopover>readme</span></el-col>
    </el-row>
    <el-row class="btnL">
      <el-col :span="8">
        <el-button class="btn" @click="newCard(1)" style="background-color:#71aadc">
          <img src="./assets/5085/rank1.png" class="rankIcon" />
          舰长数据
            <img src="./assets/5085/heart.gif" class="ani" v-for="heart in heartNums[0]" :key="heart" />
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button class="btn" @click="newCard(2)" style="background-color:#a98bde">
          <img src="./assets/5085/rank2.png" class="rankIcon" />
          提督数据
            <img src="./assets/5085/heart.gif" class="ani" v-for="heart in heartNums[1]" :key="heart" />
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button class="btn" @click="newCard(3)" style="background-color:#ff6464">
          <img src="./assets/5085/rank3.png" class="rankIcon" />
          总督数据
            <img src="./assets/5085/heart.gif" class="ani" v-for="heart in heartNums[2]" :key="heart" />
        </el-button>
      </el-col>
    </el-row>
    <el-row class="card" v-if="card" :gutter="40">
      <el-col :span="12">
          <div class="card_tit">基础属性</div>
          <div class="card_item">
            <div class="label">统率</div>
            <div class="cont">{{jc_ts}}</div>
          </div>
          <div class="card_item">
            <div class="label">武力</div>
            <div class="cont">{{jc_wl}}</div>
          </div>
          <div class="card_item">
            <div class="label">智力</div>
            <div class="cont">{{jc_zl}}</div>
          </div>
          <div class="card_item">
            <div class="label">政治</div>
            <div class="cont">{{jc_zz}}</div>
          </div>
          <div class="card_item">
            <div class="label">魅力</div>
            <div class="cont">{{jc_ml}}</div>
          </div>
          <div class="card_tit">兵种属性</div>
          <div class="card_item">
            <div class="label">枪兵</div>
            <div class="cont">{{bz_qiang}}</div>
          </div>
          <div class="card_item">
            <div class="label">戟兵</div>
            <div class="cont">{{bz_ji}}</div>
          </div>
          <div class="card_item">
            <div class="label">弩兵</div>
            <div class="cont">{{bz_nu}}</div>
          </div>
          <div class="card_item">
            <div class="label">骑兵</div>
            <div class="cont">{{bz_qi}}</div>
          </div>
          <div class="card_item">
            <div class="label">兵器</div>
            <div class="cont">{{bz_bing}}</div>
          </div>
          <div class="card_item">
            <div class="label">水军</div>
            <div class="cont">{{bz_shui}}</div>
          </div>
      </el-col>
      <el-col :span="12">
        <img v-show="sex == 1" src="./assets/5085/sex_1.jpg" class="sexPic" />
        <img v-show="sex == 2" src="./assets/5085/sex_2.jpg" class="sexPic" />
        <div class="card_item">
          <div class="label">性格</div>
          <div class="cont">{{nature}}</div>
        </div>
          <div class="card_item">
            <div class="label">技能</div>
            <div class="cont">{{skill}}</div>
          </div>
            <div class="card_item">
              <div class="cont small" v-html="skillD"></div>
            </div>
      </el-col>
    </el-row>
    <el-row class="gailv">
      <el-col :span="3"><div class="card_tit">概率公示</div></el-col>
      <el-col :span="21">
        [基础属性] 舰长60-100随机，其中具体概率：60-70（37.5%）；70-80（37.5%）；80-90（18.8%）；90-100（6.2%）<br/>
        [基础属性] 提督70-100随机，其中具体概率：70-80（50%）；80-90（31.2%）；90-100（18.8%）<br/>
        [基础属性] 总督80-100随机，其中具体概率：80-90（75%）；90-100（25%）<br/>
        [兵种属性] 舰长C-S随机，提督B-S随机，总督A-S随机，概率均等<br/>
        [天选之子] 低概率出现基础属性均为“1”的五一居士，最多5人<br/>
        [其余概率] 性别、性格、技能均为均等概率随机
      </el-col>
    </el-row>
  </div>
  <el-popover
    ref="readmePopover"
    placement="bottom"
    width="200"
    trigger="click">
    本工具仅限于B站<a href='https://space.bilibili.com/137952/' target='_blank' >依然小智</a><br/>及其舰长群内使用；<br/>
    create by <a href='https://space.bilibili.com/864527' target='_blank' >广寒</a>
  </el-popover>
</div>
</template>

<script>

let skillData = require('./san11.json')
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      card: false,
      jc_ts:'',
      jc_wl:'',
      jc_zl:'',
      jc_zz:'',
      jc_ml:'',
      bz_qiang:'',
      bz_ji:'',
      bz_nu:'',
      bz_qi:'',
      bz_bing:'',
      bz_shui:'',
      sex:'',
      nature:'',
      skill:'',
      skillD: '',
      natureL: ['冷静','莽撞','刚胆','胆小'],
      bingL:['C','B','A','S'],
      rpPercent:10,
      createNum: 0,
      tempArr: [{"6":3750,"7":7500,"8":9375,"9":10000},{"7":5000,"8":8125,"9":10000},{"8":7500,"9":10000}],
      heartNums:[[],[],[]]
    }
  },
  mounted() {
  },
  methods: {
    newCard(t) {
      let _this = this
      _this.heartFun(t)
      _this.createNum++
      // 五一居士
      let _rpNum = parseInt(_this.getCookie('rpNum')) || 0
      if (_this.createNum>=40) {
        _this.rpPercent = _this.rpPercent + 10
      }
      if (_rpNum < 5 && _this.random(0,1000) <=_this.rpPercent && _this.createNum > 3){
        _this.setCookie('rpNum',_rpNum+1,7)
        _this.jc_ts = 1
        _this.jc_wl = 1
        _this.jc_zl = 1
        _this.jc_zz = 1
        _this.jc_ml = 1
        console.log(_this.createNum,_rpNum+1)
        _this.createNum = 0
        _this.rpPercent = 10
      } else {
        _this.jc_ts = _this.randomZZ(t)
        _this.jc_wl = _this.randomZZ(t)
        _this.jc_zl = _this.randomZZ(t)
        _this.jc_zz = _this.randomZZ(t)
        _this.jc_ml = _this.randomZZ(t)
      }
      if (t == 1) { // 舰长
        _this.bz_qiang =  _this.bingL[_this.random(0, 4) -1]
        _this.bz_ji =  _this.bingL[_this.random(0, 4) -1]
        _this.bz_nu =  _this.bingL[_this.random(0, 4) -1]
        _this.bz_qi =  _this.bingL[_this.random(0, 4) -1]
        _this.bz_bing =  _this.bingL[_this.random(0, 4) -1]
        _this.bz_shui =  _this.bingL[_this.random(0, 4) -1]
      }else if (t == 2) { // 提督
        _this.bz_qiang =  _this.bingL[_this.random(1, 4) -1]
        _this.bz_ji =  _this.bingL[_this.random(1, 4) -1]
        _this.bz_nu =  _this.bingL[_this.random(1, 4) -1]
        _this.bz_qi =  _this.bingL[_this.random(1, 4) -1]
        _this.bz_bing =  _this.bingL[_this.random(1, 4) -1]
        _this.bz_shui =  _this.bingL[_this.random(1, 4) -1]
      }else if (t == 3) { // 总督
        _this.bz_qiang =  _this.bingL[_this.random(2, 4) -1]
        _this.bz_ji =  _this.bingL[_this.random(2, 4) -1]
        _this.bz_nu =  _this.bingL[_this.random(2, 4) -1]
        _this.bz_qi =  _this.bingL[_this.random(2, 4) -1]
        _this.bz_bing =  _this.bingL[_this.random(2, 4) -1]
        _this.bz_shui =  _this.bingL[_this.random(2, 4) -1]
      }
      _this.sex = _this.random(0,2)
      _this.nature = _this.natureL[_this.random(0,4) - 1]
      let _skillR = _this.random(0,100) - 1
      _this.skill = (_skillR + 1)+" - "+skillData[_skillR].skill + " ("+ skillData[_skillR].type +")"
      _this.skillD = skillData[_skillR].desc + "<br/>代表武将：" + skillData[_skillR].wj

      _this.card = true
    },
    random(min,max) {
      return min+Math.ceil(Math.random()*(max-min))
    },
    resetCookie() {
      let _this = this
      let _num = _this.getCookie('rpNum') || 0
      _this.$confirm('当前已生成'+_num+'位天选之子，即将重置生成数量并恢复上限，是否重置', '注意', {
          confirmButtonText: '重置',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("重置")
          _this.setCookie('rpNum',0,-1)
          _this.createNum = 0
          _this.rpPercent = 10
        }).catch(() => {
          // console.log("取消")
        })
    },
    setCookie(cname,cvalue,exdays){
      let d = new Date()
      d.setTime(d.getTime()+(exdays*24*60*60*1000))
      var expires = "expires="+d.toGMTString()
      document.cookie = cname+"="+cvalue+"; "+expires
    },
    getCookie(cname){
      let name = cname + "="
      let ca = document.cookie.split(';')
      for(let i=0; i<ca.length; i++) {
          let c = ca[i].trim()
          if (c.indexOf(name)==0) {
             return c.substring(name.length,c.length)
          }
      }
      return ""
    },
    randomZZ(type) {
      let _this = this
      let _randomKey = _this.random(0, 10000)
      // console.log(_randomKey)
      let _shi = 0
      let _ge = _this.random(0,11) - 1
      for (let level in _this.tempArr[(type-1)]){
        if (_randomKey < _this.tempArr[(type-1)][level]) {
          _shi = parseInt(level)
          break;
        }
      }
      return _shi * 10 + _ge
    },
    heartFun(type) {
      let _this = this
      _this.heartNums[type-1].push(_this.createNum)
      setTimeout(()=>{
        _this.heartNums[type-1].splice(0,1)
        // console.log(_this.heartNums)
      },2000)
    }
  }
}
</script>

<style>
:root {
  --LINKCOLOR: #409EFF;
}
#app {background-color: #e8e8f2;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;}
a:link,a:hover,a:visited,a:focus{color: var(--LINKCOLOR);text-decoration: none;}
.lihui{width: 500px;position: fixed;right: -130px;bottom: -345px;}
.main{width: 100%;height: 100%;box-sizing: border-box;padding: 20px;width: 100%;min-height: 100%;max-width: 1200px;display: block;margin: 0 auto;position: relative;z-index: 1;}
.title{color: #b23a37;font-size: 28px;text-align: center;font-weight: 600;}
.btnL{text-align: center;margin-top: 15px;}
.btnL button,.btnL button:hover,.btnL button:visited,.btnL button:focus{color: #FFF;}

.card{box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);background-color: rgba(255,255,255,0.6);width: 100%;box-sizing: border-box;padding: 25px;border-radius: 10px;min-height: 100px;margin-top: 20px;}
.card_tit{font-size: 14px;font-weight: 400;color: #333;display: inline-block;padding-left: 8px;border-left: 4px solid #b23a37;margin-bottom: 5px;}
.card_item{margin-bottom: 10px;border-bottom: 1px solid #eee;line-height: 30px;min-height: 30px;width: 100%;}
.label{display: inline-block;width: 100px;color: #333;font-weight: bold;}
.cont{color: #666;font-weight: normal;display: inline-block;}
.cont.small{font-size: 14px;color: #999;}
.sexPic{display: inline-block;width: 45%;margin-bottom: 20px;}
.linkBtn{color:#999;cursor:pointer;font-size: 12px;}
.btn{position: relative;z-index: 1;}
.rankIcon{width: 20px;height: 20px;display: inline-block;margin-right: 5px;vertical-align: middle;}
.ani{position: absolute;width: 30px;height: 30px;left: 0;bottom: 0;z-index: -1;opacity: 0; animation: heart 2s forwards 1}
@keyframes heart{
  0% {bottom: 0;opacity: 0;}
  40% {opacity: 0.5;bottom: 26px}
  50% {opacity: 0.5;bottom: 30px}
  55% {opacity: 0.5;bottom: 35px}
  100% {opacity: 0;bottom: 42px;}
}
.gailv{margin-top: 20px;box-sizing: border-box;text-align: left;color: #666;line-height: 18px;font-size: 12px;}
</style>
